<html>
<head>
	<title>批次实例信息列表</title>
	<meta charSet="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../../static/react/react.development.js" type="text/javascript"></script>
	<script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
	<script src="../../static/react/babel.min.js" type="text/javascript"></script>
	<!-- antd -->
	<link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css"/>
	<script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
	<!-- axios -->
	<script src="../../static/react/axios.min.js" type="text/javascript"></script>
	<script src="../../static/react/qs.js" type="text/javascript"></script>
	<script src="../../static/react/lodash.min.js" type="text/javascript"></script>
	<script src="../../static/react/request.js" type="text/javascript"></script>
	<script src="../../ffres/dict/all.js" type="text/javascript"></script>
	<link href="../../static/react/common.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="app"></div>
<script type="text/babel">
	// 请求后台相对路径
	const baseURL = "../../"
	// ant design 组件别名引用
	const {Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message} = antd
	const { TextArea } = Input;
	// 业务组件
	class App extends React.Component {
		constructor(props) {
			super(props)
			// 在构造器中获取引用实例
			this.formRef = React.createRef()
			this.modelFormRef = React.createRef()
			// 将组件内函数绑定 this 上下文
			this.query = this.query.bind(this)
			this.reset = this.reset.bind(this)
			this.doView = this.doView.bind(this)
			this.doBatchToRun = this.doBatchToRun.bind(this)
			this.doUpdateBatBatchToStop = this.doUpdateBatBatchToStop.bind(this)
			this.doUpdateBatBatchToContinue = this.doUpdateBatBatchToContinue.bind(this)
			this.doUpdateBatBatchToAgen = this.doUpdateBatBatchToAgen.bind(this)
			this.doUpadteBatInstToEnd = this.doUpadteBatInstToEnd.bind(this)
			this.handleModelClose = this.handleModelClose.bind(this)
			this.tableSelect = this.tableSelect.bind(this)
			// 初始组件数据
			this.state = {
				list: [],
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				},
				modelTitle: "",
				show: "",
				loading: false,
				opType: "", // 操作类型
				rowSelection: null,
				selectedRowKeys: []
			}
		}

		reset() {
			this.formRef.current.resetFields()
		}

		// 查询列表
		query(page) {
			const self = this
			const pageInfo = this.state.pageInfo
			if (!page || typeof page != (typeof 1)) {
				pageInfo.page = 1;
			} else {
				pageInfo.page = page;
			}
			self.setState({pageInfo: pageInfo})
			API.request({
				baseURL: baseURL,
				method: "post",
				dataType: "form",
				url: "api/bat/inst/batchs",
				data: Qs.stringify({
					// 查询条件值通过 Form 获取
					...this.formRef.current.getFieldsValue(),
					// 分页信息
					...this.state.pageInfo
				})
			}).then(function (data) {
				const pageInfo = self.state.pageInfo
				pageInfo.total = data.total
				// 回写 state 中的值后  通过 setState 通知 react 更新 DOM
				self.setState({
					list: data.rows.map(function (item, index) {
						return {...item, key: index}
					}),
					pageInfo: pageInfo,
				})
			})

		}

		tableSelect(selectedRowKeys, selectedRows) {
			if (selectedRows && selectedRows.length > 0) {
				this.setState({
					selectedRowKeys,
					rowSelection: selectedRows[0]
				})
			}
		}

		doView() {
			if (this.state.rowSelection) {
				this.setState({show: true, modelTitle: "服务参数配置信息详情", opType: "view"});
				setTimeout(() => {
					this.modelFormRef.current.setFieldsValue(Object.assign(
							this.state.rowSelection,
							{
								batchDate: moment(this.state.rowSelection.batchDate, "YYYY-MM-DD HH:mm:ss"),
								startTime: moment(this.state.rowSelection.startTime, "YYYY-MM-DD HH:mm:ss"),
								endTime: moment(this.state.rowSelection.endTime, "YYYY-MM-DD HH:mm:ss"),
							}
					))
				}, 50)
			} else {
				message.error("请选择一条数据!")
			}

		}

		doBatchToRun(){

		}

		doUpdateBatBatchToStop(){
			const self = this;
			if (self.state.rowSelection && self.state.rowSelection.batchId != null){
				Modal.confirm({
					title: '提示',
					content: '是否确认要暂停批次？',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						return new Promise((resolve, reject) => {
							API.request({
								baseURL: baseURL,
								method: "get",
								url: "api/bat/batch/info/action/",
								data: {
									batchId:self.state.rowSelection.batchId,
									batchAction : 'stop'
								},
							}).then(function(data){
								message.success(data.message)
								resolve()
								self.query(self.state.pageInfo.page)
								self.setState({
									selectedRowKeys: []
								})
							})
						});
					},
				});
			}else {
				message.error("请选择一条数据")
			}
		}

		doUpdateBatBatchToContinue(){
			const self = this;
			if (self.state.rowSelection && self.state.rowSelection.batchId != null){
				Modal.confirm({
					title: '提示',
					content: '是否确认要续跑批次？',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						return new Promise((resolve, reject) => {
							API.request({
								baseURL: baseURL,
								method: "get",
								url: "api/bat/batch/info/action/",
								data: {
									batchSerialNo:self.state.rowSelection.batchSerialNo,
									batchId:self.state.rowSelection.batchId,
									batchAction : 'continue'
								},
							}).then(function(data){
								message.success(data.message)
								resolve()
								self.query(self.state.pageInfo.page)
								self.setState({
									selectedRowKeys: []
								})
							})
						});
					},
				});
			}else {
				message.error("请选择一条数据")
			}
		}

		doUpdateBatBatchToAgen(){
			const self = this;
			if (self.state.rowSelection && self.state.rowSelection.batchId != null){
				Modal.confirm({
					title: '提示',
					content: '是否确认要重跑批次？',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						return new Promise((resolve, reject) => {
							API.request({
								baseURL: baseURL,
								method: "get",
								url: "api/bat/batch/info/action/",
								data: {
									batchId:self.state.rowSelection.batchId,
									batchAction : 'rerun'
								},
							}).then(function(data){
								message.success(data.message)
								resolve()
								self.query(self.state.pageInfo.page)
								self.setState({
									selectedRowKeys: []
								})
							})
						});
					},
				});
			}else {
				message.error("请选择一条数据")
			}
		}

		doUpadteBatInstToEnd(){
			const self = this;
			if (self.state.rowSelection && self.state.rowSelection.batchId != null){
				Modal.confirm({
					title: '提示',
					content: '是否确认要中断批次？',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						return new Promise((resolve, reject) => {
							API.request({
								baseURL: baseURL,
								method: "get",
								url: "api/bat/inst/end/",
								data: {
									batchId:self.state.rowSelection.batchId,
									batchAction : 'continue'
								},
							}).then(function(data){
								message.success(data.message)
								resolve()
								self.query(self.state.pageInfo.page)
								self.setState({
									selectedRowKeys: []
								})
							})
						});
					},
				});
			}else {
				message.error("请选择一条数据")
			}
		}


		componentDidMount() {

		}




		handleModelClose() {
			this.setState({
				show: false
			})
			this.modelFormRef.current.setFieldsValue({})
		}


		componentDidMount() {
			this.query()
		}

		render() {
			return (
					<div style={{padding: "15px"}}>
						{/* ref 创建 Form 实例的引用 */}
						<Form ref={this.formRef}>
							<Row>
								<Col span="6">
									<Form.Item label="参数组标识" name="paramGroupId">
										<Input/>
									</Form.Item>
								</Col>
								<Col span="6">
									<Form.Item label="服务参数名称" name="serviceParamName">
										<Input/>
									</Form.Item>
								</Col>
								<Col className="btn-opt" style={{padding: "0 15px"}}>
									<Button type="primary" onClick={this.query}>查询</Button>
									<Button onClick={this.reset}>清空</Button>
								</Col>
							</Row>
						</Form>
						<div className="text-left btn-opt">
							<Button type="primary" onClick={this.doView}>查看</Button>
							<Button type="primary" onClick={this.doBatchToRun} disabled={true}>调起</Button>
							<Button type="primary" onClick={this.doUpdateBatBatchToStop} disabled={true}>暂停</Button>
							<Button type="primary" onClick={this.doUpdateBatBatchToContinue}>续跑</Button>
							<Button type="primary" onClick={this.doUpdateBatBatchToAgen} disabled={true}>重跑</Button>
							<Button type="primary" onClick={this.doUpadteBatInstToEnd} disabled={true}>中断</Button>
							<Button type="primary" onClick={this.doMonitorBatch}>批次监控</Button>

						</div>
						{ /*
                        dataSource 为列表数组
                        onChange Table 内嵌分页 页码切换回调函数
                        pagination Table 内嵌分页 配置 同 Pagination 组件API
                    */}
						<Table dataSource={this.state.list} bordered
							   onChange={(pagination) => this.query(pagination.current)}
							   pagination={{
								   position: ["bottomLeft"],
								   current: this.state.pageInfo.page,
								   pageSize: this.state.pageInfo.size,
								   total: this.state.pageInfo.total
							   }}
							   rowSelection={{
								   type: "radio",
								   selectedRowKeys: this.state.selectedRowKeys,
								   onChange: this.tableSelect
							   }}>
							{ /* Table columns 的语法糖 最终还是给 Table 传递 columns 参数 dataIndex 便是对象属性  */}
							<Table.Column title="批次流水号" dataIndex="batchSerialNo"></Table.Column>
							<Table.Column title="批次日期" dataIndex="batchDate"></Table.Column>
							<Table.Column title="批次标识" dataIndex="batchId"></Table.Column>
							<Table.Column title="批次名称" dataIndex="batchName"></Table.Column>
							<Table.Column title="所属系统" dataIndex="subsCode"></Table.Column>
							<Table.Column title="批次状态" dataIndex="batchState"></Table.Column>
							<Table.Column title="人工干预" dataIndex="batchInterveneState"></Table.Column>
							<Table.Column title="批次阶段" dataIndex="stageName"></Table.Column>
							<Table.Column title="启动时间" dataIndex="startTime"></Table.Column>
							<Table.Column title="结束时间" dataIndex="endTime"></Table.Column>
							<Table.Column title="运行时长（秒）" dataIndex="costTime"></Table.Column>
						</Table>

						<Modal
								title={this.state.modelTitle}
								visible={this.state.show}
								onCancel={this.handleModelClose}
								onOk={this.handleModlelOk}
								confirmLoading={this.state.loading}
								destroyOnClose={false}
								keyboard={false}
								style={{top: 20}}
								okText="确定"
								cancelText="取消"
								width={'100%'}>
							<Form ref={this.modelFormRef} labelCol={{span: 8}} wrapperCol={{span: 16}}>
								<Row>
									<Col span="12">
										<Form.Item label="批次标识" name="batchId" rules={[{required: true, message: "请输入选项值"}]}>
											<Input placeholder="请输入" disabled={this.state.opType == 'view'||this.state.opType == 'update'}/>
										</Form.Item>
									</Col>

									<Col span="12">
										<Form.Item label="批次序号" name="batchOrder" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="批次名称" name="batchName" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="批次状态" name="batchState" >
											<Select allowClear placeholder="请选择"
													disabled={this.state.opType == 'view'}
													options={BAT_BATCH_STATE.map(function(item){
														return {label: item.cnname, value: item.enname}
													})}>
											</Select>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="干预状态" name="batchInterveneState" >
											<Select allowClear placeholder="请选择"
													disabled={this.state.opType == 'view'}
													options={BAT_BATCH_INTERVENE_STATE.map(function(item){
														return {label: item.cnname, value: item.enname}
													})}>
											</Select>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="批次日期" name="batchDate" >
											<DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.opType == 'view'} />
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="启动时间" name="startTime" >
											<DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.opType == 'view'} />
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="结束时间" name="endTime" >
											<DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.opType == 'view'} />
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="需调度任务数" name="needRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="运行中任务数" name="existRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>SAgentInfoList.html
									</Col>
									<Col span="12">
										<Form.Item label="未运行任务数" name="notRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="运行成功任务数" name="succeedRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="运行失败任务数" name="faildRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="运行警告任务数" name="warnRunCount" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
									<Form.Item label="运行置过任务数" name="skipRunCount" >
										<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
									</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="批次流水号" name="batchSerialNo" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="备注" name="remark" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="系统代码" name="subsCode">
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="运行时长" name="costTime">
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="阶段名称" name="stageName">
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>
									<Col span="12">
										<Form.Item label="阶段编号" name="stageId" >
											<Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
										</Form.Item>
									</Col>

								</Row>
							</Form>
						</Modal>
					</div>
			)
		}
	}

	ReactDOM.render(
			<antd.ConfigProvider locale={antd.locales.zh_CN}>
				<App/>
			</antd.ConfigProvider>,
			document.getElementById('app')
	);
</script>
</body>
</html>